.square-box {
  width: 100%;
  min-height: 100vh;
  padding: 100rpx 0;

  .empty {
    text-align: center;
    color: #999;
    margin-top: 30vh;
  }

  .list {
    margin-top: 60rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;

    .list-item {
      width: 320rpx;
      height: 320rpx;
      border-radius: 20rpx;
      border: 1rpx solid red;
      .room-info {
        height: 320rpx;
        position: relative;

        .cover-img {
          position: absolute;
          width: 100%;
          height: 100%;
        }

        .channel-id {
          position: absolute;
          top: 20rpx;
          right: 20rpx;
          background-color: rgba(0, 0, 0, 0.3);
          color: #fff;
          border-radius: 999rpx;
          padding: 0 20rpx;
          line-height: 1.2;
        }
      }

      .publisher-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 10rpx;

        .publisher__table {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          margin-right: 10rpx;
        }
      }
    }
  }
}
